<template>
    <view class="container">
        <header-bar :config="config" @rightClick="addOrderClick"></header-bar>
        <search-bar
            ref="orderSearch"
            :placeholderText="placeholderText"
            @searchFn="searchFn"
            :actions="actions"
            @actionFn="filterOpen">
        </search-bar>
        <view class="nav-box">
            <view class="nav-item nav-item-l">
                <view class="name">
                    <view>应收金额</view>
                    <image src="/static/img/erp/icon_dz.png" class="icon-dz"></image>
                </view>
                <view class="sum"><text>¥</text>{{ balanceStatistics.ArTotal }}</view>
                <view class="advance">预收：¥{{ balanceStatistics.YsTotal }}</view>
            </view>
            <view class="nav-item nav-item-r">
                <view class="name">
                    <view>应付金额</view>
                    <image src="/static/img/erp/icon_dz.png" class="icon-dz"></image>
                </view>
                <view class="sum"><text>¥</text>{{ balanceStatistics.ApTotal }}</view>
                <view class="advance">预付：¥{{ balanceStatistics.YfTotal }}</view>
            </view>
        </view>
        <view class="list-header">
            <view class="title"> 往来明细（{{ waitTotal }}） </view>
            <!-- <view class="filter">
                <view class="f-item" @click="showPx = true">
                    排序<iconsfont customIcons="icon-xialaxuanze" class="icon" size="18"></iconsfont>
                </view>
                <view class="f-item" @tap="showSx = true">
                    筛选<iconsfont customIcons="icon-shaixuan1" class="icon" size="18"></iconsfont>
                </view>
            </view> -->
        </view>
        <c-picker
            :show="showPx"
            title="排序"
            :columns="columnsPx"
            @cancel="showPx = false"
            @confirm="confirmPx"></c-picker>
        <c-picker
            :show="showSx"
            title="筛选"
            :columns="columnsSx"
            @cancel="showSx = false"
            @confirm="confirmSx"></c-picker>
        <view class="main">
            <list ref="list" :height="listHeight" @totalBack="waitTotalBack"></list>
        </view>
    </view>
</template>

<script>
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "@/components/common/tab-bar.vue"
import cPicker from "../components/c-picker.vue"
import searchBar from "@/components/common/search-bar.vue"
import List from "./list.vue"
import {
    getBalanceStatistics,
    getSaleSummaryDetail,
    getCustomerStatistics,
    getTradeOrderBy,
    getTradeFitel,
} from "@/service/api/erp.js"
export default {
    components: {
        tabBar,
        cPicker,
        searchBar,
        List,
    },
    data() {
        return {
            showPx: false,
            showSx: false,
            columnsPx: [["默认排序", "应收升序", "应收降序"]],
            columnsSx: [
                ["金额筛选", "往来单位"],
                ["显示全部", "只显示应收不为0", "只显示应付不为0"],
            ],
            placeholderText: "输入客户名称或手机号",
            config: {
                title: "往来余额查询",
                back: true,
                centerSlot: true,
                rightSlot: true,
                color: ["#333333"],
                statusBarFontColor: "#333333",
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                    },
                ],
            },
            listHeight: "",
            loadOk: false,
            actions: [],
            searchForm: {
                fullName: "",
            },
            waitTotal: 0,
            balanceStatistics: {}, // 账户余额
        }
    },
    created() {
        let mainColor = this.easyGetColor("white")
        this.config.backgroundColor = [1, mainColor]
    },
    mounted() {
        this.getListHeight()
    },
    onShow() {
        getTradeOrderBy().then((res) => {})
        getTradeFitel().then((res) => {})

        this.init()
    },
    methods: {
        init() {
            getBalanceStatistics().then((res) => {
                if (res.State == 1) {
                    this.balanceStatistics = res.Data
                }
            })
        },
        bindChange: function (e) {
            const val = e.detail.value
            this.year = this.years[val[0]]
            this.month = this.months[val[1]]
            this.day = this.days[val[2]]
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        searchFn(key) {
            this.searchForm.fullName = key
            this.$refs.list.refresh(this.searchForm)
        },
        waitTotalBack(e) {
            this.waitTotal = e
        },
        confirmPx(e) {
            this.showPx = false
        },
        confirmSx(e) {
            this.showSx = false
        },
    },
}
</script>

<style lang="scss">
.nav-box {
    display: flex;
    background: #ffffff;
    border-radius: 0px 0px 40rpx 40rpx;
    padding: 20rpx 40rpx 40rpx;
    color: #ffffff;
    .nav-item {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        height: 300rpx;
        &.nav-item-l {
            margin-right: 40rpx;
            background: linear-gradient(138deg, #fd5c4e 0%, #fd5d4f 0%, #fdc78b 100%);
            border-radius: 24px;
        }
        &.nav-item-r {
            background: linear-gradient(314deg, #303144 0%, #565d77 100%);
            border-radius: 24px;
        }
        .name {
            width: 100%;
            box-sizing: border-box;
            padding: 0 16px;
            display: flex;
            justify-content: space-between;
            padding-top: 26rpx;
            font-size: $size-32;
            .icon-dz {
                width: 28px;
                height: 16px;
            }
        }
        .sum {
            padding-top: 26rpx;
            font-size: $size-40;
            font-weight: bold;
            text {
                font-size: $size-24;
                font-weight: normal;
                padding-right: 8rpx;
            }
        }
        .advance {
            padding-bottom: 56rpx;
            font-size: $size-32;
        }
    }
}

.list-header {
    display: flex;
    align-items: center;
    height: 100rpx;
    margin: 0 $app-page-padding;
    position: relative;
    z-index: 1;
    .title {
        flex: 1;
        font-size: $size-32;
        font-weight: bold;
    }
    .filter {
        display: flex;
        align-items: center;
        .f-item {
            width: 100rpx;
            height: 42rpx;
            margin-left: 16rpx;
            line-height: 42rpx;
            text-align: center;
            border-radius: 4rpx;
            border: 1px solid #434c67;
            font-size: $size-24;
        }
    }
}
</style>
